<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<meta http-equiv="Content-Language" content="zh-CN" />  
<title></title>  
<style type="text/css">  
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}  
#mydemo{margin:100px auto;width:277px;letter-spacing:-1em;}  
#mydemo span{margin:0 5px;font-size:0;width:2em;height:14em;display:inline-block;position:relative;overflow:hidden;}  
  
.clock{font-size:16px;width:9em;height:14em;position:relative;display:inline-block;margin:0 2px;-webkit-text-size-adjust:none;}  
.clock{*display:inline;}  
.clock div{position: absolute;border-style:solid;}  
.clock .l,.clock .r,.clock .u,.clock .d{width:0;height:0;overflow:hidden;}  
  
.clock .v{width:0;height:5em;border-width:0 0.5em;border-color:#565656;}  
.clock .v .u{border-style:dotted dotted solid dotted;border-width:0 0.5em 0.5em;border-color:transparent transparent #565656 transparent;top:-0.5em;left:-0.5em;}  
.clock .v .d{border-style:solid dotted dotted dotted;border-width:0.5em 0.5em 0 0.5em;border-color:#565656 transparent transparent transparent;left:-0.5em;bottom:-0.5em}  
  
.clock .h{width:5.5em;height:0;border-width:0.5em 0;border-color:#565656;}  
.clock .h .l{border-style:dotted solid dotted dotted;border-width:0.5em 0.5em 0.5em 0;border-color:transparent #565656 transparent transparent;top:-0.5em;left:-0.5em;}  
.clock .h .r{border-style:dotted dotted dotted solid;border-width:0.5em 0 0.5em 0.5em;border-color:transparent transparent transparent #565656;top:-0.5em;right:-0.5em;}  
  
.clock .n1{left:0.5em;top:1.5em;}  
.clock .n2{left:0.5em;top:7.5em;}  
.clock .n4{left:7.5em;top:7.5em;}  
.clock .n5{left:7.5em;top:1.5em;}  
  
.clock .n6{top:0.4em;left:1.8em;}  
.clock .n3{top:12.5em;left:1.8em;}  
.clock .n7{top:6.5em;left:1.8em;}  
  
.dot {width:2em;height:14em;}  
.dot1,.dot2 {width:0;height:0;border:0.5em solid #565656;position:absolute;left:0.5em;font-size:1em}  
.dot1{top:4em;}  
.dot2{top:9em;}  
.putout .dot1,.putout .dot2 {display:none;}  
  
/*原始样式  
.c1 .n1,.c1 .n2,.c1 .n3,.c1 .n6,.c1 .n7,  
.c2 .n1,.c2 .n4,  
.c3 .n1,.c3 .n2,  
.c4 .n2,.c4 .n3,.c4 .n6,  
.c5 .n2,.c5 .n5,  
.c6 .n5,  
.c7 .n1,.c7 .n2,.c7 .n3,.c7 .n7,  
.c9 .n2,  
.c0 .n7{display:none}  
*/  
  
.c1 .n1,.c1 .n2,.c1 .n3,.c1 .n6,.c1 .n7,  
.c2 .n1,.c2 .n4,  
.c3 .n1,.c3 .n2,  
.c4 .n2,.c4 .n3,.c4 .n6,  
.c5 .n2,.c5 .n5,  
.c6 .n5,  
.c7 .n1,.c7 .n2,.c7 .n3,.c7 .n7,  
.c9 .n2,  
.c0 .n7{border-color:#eee;}  
  
.c1 .n3 .l,.c1 .n3 .r,.c1 .n6 .l,.c1 .n6 .r,.c1 .n7 .l,.c1 .n7 .r,  
.c4 .n3 .l,.c4 .n3 .r,.c4 .n6 .l,.c4 .n6 .r,  
.c7 .n3 .l,.c7 .n3 .r,.c7 .n7 .l,.c7 .n7 .r,  
.c0 .n7 .l,.c0 .n7 .r{border-left-color:#eee;border-right-color:#eee;}  
  
.c1 .n1 .u,.c1 .n1 .d,.c1 .n2 .u,.c1 .n2 .d,  
.c2 .n1 .u,.c2 .n1 .d,.c2 .n4 .u,.c2 .n4 .d,  
.c3 .n1 .u,.c3 .n1 .d,.c3 .n2 .u,.c3 .n2 .d,  
.c4 .n2 .u,.c4 .n2 .d,  
.c5 .n2 .u,.c5 .n2 .d,.c5 .n5 .u,.c5 .n5 .d,  
.c6 .n5 .u,.c6 .n5 .d,  
.c7 .n1 .u,.c7 .n1 .d,.c7 .n2 .u,.c7 .n2 .d,  
.c9 .n2 .u,.c9 .n2 .d{border-top-color:#eee;border-bottom-color:#eee;}  
  
</style>  
<script type="text/javascript" language="javascript" >  
  
    var Clock={  
        size:1,  
        handle:null,  
        hour:0,  
        min:0,  
        sec:0,  
        resize:function(){  
            var clocks=document.getElementById("mydemo").children,i=0,k=clocks.length;  
            var fontsize=(this.size % 20)+"px",halfsize=(this.size++ % 20)+"px";  
  
            for(;i<k-2;){  
                clocks[i++].style.fontSize=fontsize;  
            }  
            clocks[i++].style.fontSize=halfsize;  
            clocks[i++].style.fontSize=halfsize;  
        },  
  
        stopClock:function(){  
            clearTimeout(Clock.handle);  
        },  
  
        startClock:function(){  
                var da=new Date();  
                var clocks=document.getElementById("mydemo").children;  
  
                var sec=da.getSeconds();  
                clocks[7].className="clock c"+(sec % 10);  
                clocks[6].className="clock c"+((sec-(sec % 10))/10);  
  
  
                if( Clock.min!=da.getMinutes() ){  
                    Clock.min=da.getMinutes();  
                    clocks[4].className="clock c"+(Clock.min % 10)  ;  
                    clocks[3].className="clock c"+((Clock.min-(Clock.min % 10))/10);  
                }  
  
                if( Clock.hour!=da.getHours() ){  
                    Clock.hour=da.getHours();  
                    clocks[1].className="clock c"+(Clock.hour % 10) ;  
                    clocks[0].className="clock c"+((Clock.hour-(Clock.hour % 10))/10);  
                }  
                Clock.handle=setTimeout(arguments.callee,1000);  
        }  
    }  
  
</script>  
</head>  
  
<body>  
<div id="mydemo">  
    <div class="clock c0">  
        <div class="v n1"><div class="u"></div><div class="d"></div></div>  
        <div class="v n2"><div class="u"></div><div class="d"></div></div>  
        <div class="h n3"><div class="l"></div><div class="r"></div></div>  
        <div class="v n4"><div class="u"></div><div class="d"></div></div>  
        <div class="v n5"><div class="u"></div><div class="d"></div></div>  
        <div class="h n6"><div class="l"></div><div class="r"></div></div>  
        <div class="h n7"><div class="l"></div><div class="r"></div></div>  
    </div>  
    <div class="clock c0">  
        <div class="v n1"><div class="u"></div><div class="d"></div></div>  
        <div class="v n2"><div class="u"></div><div class="d"></div></div>  
        <div class="h n3"><div class="l"></div><div class="r"></div></div>  
        <div class="v n4"><div class="u"></div><div class="d"></div></div>  
        <div class="v n5"><div class="u"></div><div class="d"></div></div>  
        <div class="h n6"><div class="l"></div><div class="r"></div></div>  
        <div class="h n7"><div class="l"></div><div class="r"></div></div>  
    </div>  
    <span>     
        <div class="dot1"></div>     
        <div class="dot2"></div>     
    </span>  
    <div class="clock c0">  
        <div class="v n1"><div class="u"></div><div class="d"></div></div>  
        <div class="v n2"><div class="u"></div><div class="d"></div></div>  
        <div class="h n3"><div class="l"></div><div class="r"></div></div>  
        <div class="v n4"><div class="u"></div><div class="d"></div></div>  
        <div class="v n5"><div class="u"></div><div class="d"></div></div>  
        <div class="h n6"><div class="l"></div><div class="r"></div></div>  
        <div class="h n7"><div class="l"></div><div class="r"></div></div>  
    </div>  
    <div class="clock c0">  
        <div class="v n1"><div class="u"></div><div class="d"></div></div>  
        <div class="v n2"><div class="u"></div><div class="d"></div></div>  
        <div class="h n3"><div class="l"></div><div class="r"></div></div>  
        <div class="v n4"><div class="u"></div><div class="d"></div></div>  
        <div class="v n5"><div class="u"></div><div class="d"></div></div>  
        <div class="h n6"><div class="l"></div><div class="r"></div></div>  
        <div class="h n7"><div class="l"></div><div class="r"></div></div>  
    </div>  
    <span>     
        <div class="dot1"></div>     
        <div class="dot2"></div>     
    </span>  
    <div class="clock c0">  
        <div class="v n1"><div class="u"></div><div class="d"></div></div>  
        <div class="v n2"><div class="u"></div><div class="d"></div></div>  
        <div class="h n3"><div class="l"></div><div class="r"></div></div>  
        <div class="v n4"><div class="u"></div><div class="d"></div></div>  
        <div class="v n5"><div class="u"></div><div class="d"></div></div>  
        <div class="h n6"><div class="l"></div><div class="r"></div></div>  
        <div class="h n7"><div class="l"></div><div class="r"></div></div>  
    </div>  
    <div class="clock c0">  
        <div class="v n1"><div class="u"></div><div class="d"></div></div>  
        <div class="v n2"><div class="u"></div><div class="d"></div></div>  
        <div class="h n3"><div class="l"></div><div class="r"></div></div>  
        <div class="v n4"><div class="u"></div><div class="d"></div></div>  
        <div class="v n5"><div class="u"></div><div class="d"></div></div>  
        <div class="h n6"><div class="l"></div><div class="r"></div></div>  
        <div class="h n7"><div class="l"></div><div class="r"></div></div>  
    </div>  
</div>  
<script>  
Clock.resize();  
Clock.resize();  
Clock.resize();  
Clock.resize();  
Clock.startClock();  
</script>  
</body>  
</html> 